<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="d3.js"></script>
    <script>
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',600);
        svg.style('border','2px solid #ccc');
        
        const data = [
            {date:'2022-01',value :100},
            {date:'2022-02',value :110},
            {date:'2022-03',value :90},
            {date:'2022-04',value :120},
            {date:'2022-05',value :150},
            {date:'2022-06',value :100},
            {date:'2022-07',value :80},
            {date:'2022-08',value :130},
            {date:'2022-09',value :95},
            {date:'2022-10',value :140},
            {date:'2022-11',value :120},
            {date:'2022-12',value :95},
        ]

        const a = d3.scaleTime()
            .domain([new Date('2022') , new Date('2023')])
            .range([0,Math.PI * 2]);


        const la = d3.lineRadial()
            .angle(d=>a(new Date(d.date)))
            .radius(d=>d.value)
            .curve(d3.curveCatmullRomClosed)
        
        const g = svg.append('g')
            .attr('transform','translate(400,300)')  
        data.forEach((e,i) => {
            const angle = a(new Date(e.date)) ;
            const {x,y} = {
                x : Math.sin(angle) * e.value,
                y : -Math.cos(angle) * e.value
            }
            g.append('circle')
                .attr('cx',x)
                .attr('cy',y)
                .attr('r',4)
                .attr('fill','steelblue')
        })

        svg.append('g')
            .attr('transform','translate(400,300)')
            .append('path')
            .attr('d',la(data))
            .attr('fill','none')
            .attr('stroke','#666')   

    </script>
</body>
</html>